<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/dist/include-openlayers-local.js"></script>
    <script src="./lib/dist/include-lib-local.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
  </head>
  <body>
    <button onclick="addPoint()">添加点要素到数据库</button>
    <button onclick="removePoint()">取消添加点要素</button>
    <button onclick="addLine()">添加线要素到数据库</button>
    <button onclick="removeLine()">取消添加线要素</button>
    <button onclick="addArea()">添加区要素到数据库</button>
    <button onclick="removeArea()">取消添加区要素</button>
    <button onclick="deleteFeature()">删除要素</button>
    <button onclick="putFeature()">修改要素</button>
    <button onclick="saveMap()">保存地图</button>
    <div id="map_container"></div>
    <script>
      var gaode = new ol.layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: false,
          crossOrigin: 'Anonymous'
        })
      })
      var map = new ol.Map({
        target: 'map_container',
        layers: [gaode],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [114.3, 30.5],
          zoom: 4
        })
      })
      var cityLayer = new Zondy.Map.Doc('', 'zaa', {
        ip: 'localhost',
        port: 6163,
        crossOrigin: 'Anonymous'
      })
      map.addLayer(cityLayer)
      function addPoint() {
        map.on('click', addPointFeature)
      }
      function removePoint() {
        map.un('click', addPointFeature)
      }
      /* 1、创建点要素 -几何,样式,属性 */
      function addPointFeature(e) {
        //1-1、构建要素的几何信息
        //描述构成MapGIS点要素的空间几何信息
        var gPoint = new Zondy.Object.GPoint(e.coordinate[0], e.coordinate[1])
        //设置点要素几何图形信息类
        var fGeom = new Zondy.Object.FeatureGeometry({
          PntGeom: [gPoint]
        })
        //1-2、设置样式信息
        var pointInfo = new Zondy.Object.CPointInfo({
          Angle: 0, //角度
          Color: 3, //子图的颜色
          Space: 0,
          SymHeight: 5, //点的高度
          SymID: 31, //子图号
          SymWidth: 5 //点的宽度
        })
        //设置当前点要素的图形参数信息
        var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
          InfoType: 1, //点
          PntInfo: pointInfo
        })
        //1-3、设置属性信息
        var attValue = ['上海']
        /* 2、构建要素对象 */
        var feature = new Zondy.Object.Feature({
          fGeom: fGeom, //几何
          GraphicInfo: webGraphicInfo, //样式
          AttValue: attValue //属性
        })
        //设置要素的类型 1点 2线  3面
        feature.setFType(1)
        /* 3、设置要素集添加要素 */
        var featureSet = new Zondy.Object.FeatureSet()
        //设置属性结构
        var cAttStruct = new Zondy.Object.CAttStruct({
          FldName: ['name'],
          FldNumber: 1,
          FldType: ['string']
        })
        featureSet.AttStruct = cAttStruct
        featureSet.addFeature(feature)
        /* 4、调用编辑服务接口 */
        /* 创建一个编辑服务类
            第一个参数:服务的名称 第二个参数:服务的图层
             */
        var editService = new Zondy.Service.EditDocFeature('zaa', 2, {
          ip: 'localhost',
          port: 6163
        })
        //执行添加点要素集
        editService.add(featureSet, onPntSuccess)
      }

      function addLine() {
        map.on('click', addLineFeature)
      }
      var linePoint = []
      function addLineFeature(e) {
        /* 2.1 构建几何信息 */
        var pointObj = []
        linePoint.push(e.coordinate)
        if (linePoint.length == 2) {
          pointObj[0] = new Zondy.Object.Point2D(linePoint[0][0], linePoint[0][1])
          pointObj[1] = new Zondy.Object.Point2D(linePoint[1][0], linePoint[1][1])
          /* 构成折线的弧度 */
          var gArc = new Zondy.Object.Arc(pointObj)
          /* 构成线的折线 */
          var gAnyLine = new Zondy.Object.AnyLine([gArc])
          /* 设置线要素的几何信息 */
          var gLine = new Zondy.Object.GLine(gAnyLine)
          /* 设置要素的几何信息 */
          var fGeom = new Zondy.Object.FeatureGeometry({ LinGeom: [gLine] })
          /* 2.2 设置而样式信息 */
          //设置添加线要素的图形参数信息
          var clineInfo = new Zondy.Object.CLineInfo({
            Color: 1, //子图的颜色号
            LinStyleID: 0,
            LinStyleID2: 19,
            LinWidth: 0.1, //线宽
            Xscale: 10,
            Yscale: 10
          })
          //设置要素的图形参数
          var graphicInfo = new Zondy.Object.WebGraphicsInfo({
            InfoType: 2, //线
            LinInfo: clineInfo
          })
          /* 2.3 设置属性信息 */
          var attValue = ['武广线', 1289]
          /* 2.4  构建要素类*/
          //创建一个线要素
          var newFeature = new Zondy.Object.Feature({
            fGeom: fGeom,
            GraphicInfo: graphicInfo,
            AttValue: attValue
          })
          //设置要为线要素
          newFeature.setFType(2)
          /* 2.5 设置要素集 */
          //创建一个要素数据集
          var featureSet = new Zondy.Object.FeatureSet()
          //创建属性结构设置对象
          var cAttStruct = new Zondy.Object.CAttStruct({
            FldName: ['name', 'length'],
            FldNumber: 3,
            FldType: ['string', 'double ']
          })
          //设置要素数据集的属性结构
          featureSet.AttStruct = cAttStruct
          //将添加的线要素添加到属性数据集中
          featureSet.addFeature(newFeature)
          /* 2.6 调用地图编辑服务接口 */
          //创建一个地图编辑对象
          var editDocFeature = new Zondy.Service.EditDocFeature('zaa', 1, {
            ip: 'localhost',
            port: '6163'
          })
          editDocFeature.add(featureSet, onPntSuccess)
        }
      }
      function removeLine() {
        map.un('click', addLineFeature)
      }
      function addArea() {
        map.on('click', addAreaFeature)
      }
      var areaPoint = []
      function addAreaFeature(e) {
        /* 2.1 构建几何信息 */
        areaPoint.push(e.coordinate)
        var areapointObj = []
        if (areaPoint.length == 4) {
          areapointObj[0] = new Zondy.Object.Point2D(areaPoint[0][0], areaPoint[0][1])
          areapointObj[1] = new Zondy.Object.Point2D(areaPoint[1][0], areaPoint[1][1])
          areapointObj[2] = new Zondy.Object.Point2D(areaPoint[2][0], areaPoint[2][1])
          areapointObj[3] = new Zondy.Object.Point2D(areaPoint[3][0], areaPoint[3][1])
          //设置区要素的几何信息
          var gArc = new Zondy.Object.Arc(areapointObj)
          //构成区要素折线
          var gAnyLine = new Zondy.Object.AnyLine([gArc])
          //构成区要素
          var gRegion = new Zondy.Object.GRegion([gAnyLine])
          //构成区要素的几何信息
          var fGeom = new Zondy.Object.FeatureGeometry({ RegGeom: [gRegion] })
          /* 2.2 设置样式信息 */
          var cRegionInfo = new Zondy.Object.CRegionInfo({
            EndColor: 1,
            FillColor: 21,
            FillMode: 0,
            OutPenWidth: 1,
            OverMethod: 0,
            PatAngle: 1,
            PatColor: 1,
            PatHeight: 1,
            PatID: 27,
            PatWidth: 1
          })
          var graphicInfo = new Zondy.Object.WebGraphicsInfo({
            InfoType: 3, //区
            RegInfo: cRegionInfo
          })
          /* 2.3 设置属性信息 */
          //设置区要素的属性信息
          var attValue = ['西南军区', 100, 800]
          /* 2.4 构建区要素对象 */
          //创建一个新的区要素
          var newFeature = new Zondy.Object.Feature({
            fGeom: fGeom,
            GraphicInfo: graphicInfo,
            AttValue: attValue
          })
          newFeature.setFType(3)
          /* 2.5 设置要素集 */
          var featureSet = new Zondy.Object.FeatureSet()
          var cAttValue = new Zondy.Object.CAttStruct({
            FldNumber: 3,
            FldType: ['string', 'float', 'int'],
            FldName: ['name', 'area', 'length']
          })
          featureSet.AttStruct = cAttValue
          featureSet.addFeature(newFeature)
          /* 2.6调用地图编辑服务接口 */
          //创建一个要素编辑服务对象
          var editDocFeature = new Zondy.Service.EditDocFeature('zaa', 0, {
            ip: 'localhost',
            port: '6163'
          })
          editDocFeature.add(featureSet, onPntSuccess)
        }
      }
      function removeArea() {
        map.un('click', addAreaFeature)
      }
      function onPntSuccess(data) {
        if (data.succeed) {
          cityLayer.refresh() //重新加载地图文档
          // alert('添加成功')
        } else {
          alert('添加点要素失败')
        }
      }
      function saveMap() {
        const result = confirm('确认保存地图吗')
        if (result) {
          map.once('postcompose', function (event) {
            const canvas = event.context.canvas
            canvas.toBlob(function (blob) {
              saveAs(blob, 'map.png')
            })
          })
          map.renderSync()
        }
      }
      function deleteFeature() {
        var featureIds = ['1', '5', '6', '7', '8', '9', '10', '11', '12']
        var deleteService = new Zondy.Service.EditDocFeature(
          'zaa', //IG Server中地图文档
          0, //选择图层
          {
            ip: 'localhost',
            port: '6163'
          }
        )
        deleteService.deletes(featureIds, onSuccess)
      }
      function onSuccess(data) {
        if (data.succeed) {
          cityLayer.refresh() //重新加载地图文档
          alert('删除成功')
        } else {
          alert('删除点要素失败')
        }
      }
      function putFeature() {
        var gpoint = new Zondy.Object.GPoint(0, 0) // 修改位置
        /* 设置当前点要素的几何信息 */
        var fGeom = new Zondy.Object.FeatureGeometry({
          PntGeom: [gpoint]
        })
        /* 2.2 设置样式信息 */
        var pointInfo = new Zondy.Object.CPointInfo({
          Angle: 0,
          Color: 8, //子图的颜色
          Space: 0,
          SymHeight: 5, //点的高度
          SymID: 31,
          SymWidth: 5 //点的宽度
        })
        /* 设置当点要素的图形参数信息 */
        var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
          InfoType: 1, //点
          PntInfo: pointInfo
        })
        /* 2.3 设置属性信息 */
        /* 设置添加点要素的属性信息 */
        var attValue = ['东海']
        /* 2.4  构建要素对象 */
        var feature = new Zondy.Object.Feature({
          fGeom: fGeom, //坐标--几何信息
          GraphicInfo: webGraphicInfo, //样式信息
          AttValue: attValue //属性
        })
        /* 设置要素为点要素 
        点 -->1
        线 -->2
        面 -->3
        */
        feature.setFType(1)
        feature.setFID(45) //++
        /* 2.5 设置要素集 */
        //创建一个要素数据集
        var featureSet = new Zondy.Object.FeatureSet()
        /* 设置属性结构 */
        var cAttStruct = new Zondy.Object.CAttStruct({
          FldName: ['name'], //属性的字段名
          FldNumber: 2, //属性的个数
          FldType: ['string'] //属性的类型
        })
        featureSet.AttStruct = cAttStruct
        /* 添加要素到要素数据集 */
        featureSet.addFeature(feature)
        /* 2.6 调用编辑服务接口 */
        /* 
        创建一个编辑服务类 
        第一个参数：服务的名称 第二参数：图层的名称
        */
        var editService = new Zondy.Service.EditDocFeature('zaa', 2, {
          ip: 'localhost',
          port: '6163' //访问IGServer的端口号, .net为6163,Java为8089
        })
        //执行添加点要素功能
        editService.update(featureSet, editSuccess)
      }
      function editSuccess(data) {
        if (data.succeed) {
          alert('修改成功')
          cityLayer.refresh(); //重新加载地图文档
        } else {
          alert('修改失败')
        }
      }
    </script>
  </body>
</html>
